<template>
  <!--图表区域左右均分-->
  <div class="real_time_data">
    <div class="contain_box">
      <div class="top">{{myDate}}</div>
      <div class="bottom">

        <!--监测数据-->
        <div class="monitor">
          <div>
            <div class="biaoti">空气温度</div>
            <div class="pargross_bar">
              <div class="bar1" :style="'width: calc(100% * ('+temperature+'/ 100));'">
                <span>{{temperature==100?'暂无数据':temperature+'℃'}}</span>
              </div>
            </div>
          </div>

          <div>
            <div class="biaoti">空气湿度</div>
            <div class="pargross_bar">
              <div class="bar1 bar2" :style="'width: calc(100% * ('+wet+' / 100));'">
                <span>{{wet==100?'暂无数据':wet+'%'}}</span>
              </div>
            </div>
          </div>



          <div>
            <div class="biaoti">PM2.5</div>
            <div class="pargross_bar">
              <div class="pargross_bar">
                <div class="bar1 bar3" :style="'width: calc(100% * ('+pm+' / 0.1));'">
                  <span>{{pm==0.1?'暂无数据':parseInt(pm*100)}}</span>
                </div>
              </div>
            </div>
          </div>


          <div>
            <div class="biaoti">风速</div>
            <div class="pargross_bar">
              <div class="pargross_bar">
                <div class="bar1 bar4" :style="'width: calc(100% * ('+cloud+' / 1));'">
                  <span>{{cloud==1?'暂无数据':cloud+'km/h'}}</span>
                </div>
              </div>
            </div>
          </div>

          <div>
            <div class="biaoti">风向</div>
            <div class="pargross_bar">
              <div class="pargross_bar">
                <div class="bar1 bar5" :style="'width: calc(100% * ('+9+' / 9));'">
                  <span v-if="direction==1+''">北风</span>
                  <span v-if="direction==2+''">东北风</span>
                  <span v-if="direction==3+''">东风</span>
                  <span v-if="direction==4+''">东南风</span>
                  <span v-if="direction==5+''">南风</span>
                  <span v-if="direction==6+''">西南风</span>
                  <span v-if="direction==7+''">西风</span>
                  <span v-if="direction==8+''">西北风</span>
                  <span v-if="direction==9+''">暂无数据</span>
                </div>
              </div>
            </div>
          </div>

          <div>
            <div class="biaoti">土壤湿度</div>
            <div class="pargross_bar">
              <div class="bar1" :style="'width: calc(100% * ('+soil+' / 1));'">
                <span>{{soil==1?'暂无数据':parseInt(soil*100)+'%'}}</span>
              </div>
            </div>
          </div>

          <div>
            <div class="biaoti">光照</div>
            <div class="pargross_bar">
              <div class="bar1" :style="'width: calc(100% * ('+light+' / 1000));'">
                <span>{{light==1000?'暂无数据':light+'Lux'}}</span>
              </div>
            </div>
          </div>

        </div>

        <!--监测数据-->

      </div>


    </div>
  </div>
  <!--图表区域左右均分-->
</template>

<script>
    export default {
        name: "RealTimeData",
        data(){
          return{
            temperature:'',
            wet:'',
            pm:'',
            cloud:'',
            direction:'',
            soil:'',
            light:'',
            myDate: '',//当前系统时间
            value:'',
            base_id:'',
          }
        },
        created(){
          this.$http.get('/api/MobileAadminApi/getBase', null, r => {
            this.value = r.data[0].name;
            this.base_id = r.data[0].id;

            this.getSystemDate();
            this.creatTemperature();
            this.creatWet();
            this.creatPm();
            this.creatCloud();
            this.creatDirection();
            this.creatSoil();
            this.creatLight();
          });

        },
        methods:{
          getSystemDate(){
            let myDates = new Date();
            this.myDate = myDates.getFullYear()+'/'+(myDates.getMonth()+1)+'/'+myDates.getDate();        //获取日期与时间
          },//获取当前系统时间
          creatTemperature() {
            let that = this;
            console.log('调用时base_id', this.base_id);
            this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + that.base_id + "&type=2", null, r => {
              console.log('温度',r);
              that.temperature = parseInt(r.data.sources);
            });

          },
          creatWet() {
            let that = this;
            this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + that.base_id + "&type=3", null, r => {
              that.wet = parseFloat(r.data.sources,1);
            });

          },
          creatPm() {
            let that = this;
            this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + that.base_id + "&type=7", null, r => {
              console.log('pm：',r.data.sources);
              that.pm = r.data.sources;
            });
          },
          creatCloud() {
            let that = this;
            this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + that.base_id + "&type=5", null, r => {
              console.log('风速',r);
              that.cloud = parseFloat(r.data.sources,1);
            });
          },
          creatDirection() {
            let that = this;
            this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + that.base_id + "&type=4", null, r => {
              console.log('当前的风向数据为：',r.data.sources);
              that.direction=r.data.sources;
            });
          },
          creatSoil() {
            let that =this;
            this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + that.base_id + "&type=6", null, r => {
              console.log('土壤湿度：',r.data.sources);
              that.soil = r.data.sources;
            });
          },
          creatLight() {
            let that = this;
            this.$http.get("/api/UserCheckApi/getEquipmentNow?base_id=" + that.base_id + "&type=8", null, r => {
              that.light = parseFloat(r.data.sources,1);
            });

          },

        },
    }
</script>

<style scoped>
  .real_time_data{
    box-sizing: border-box;
  }
  .contain_box{
    height: 100%;
    width: 100%;
    background: white;
    border-radius: 3%;
    margin-bottom: 0.2rem;
  }
  .top {
    font-size: 0.3rem;
    color: #000000;
  }

  .bottom{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    box-sizing: border-box;
    overflow: hidden;
  }
  /*改版之后检测数据的样式*/
  .monitor{
    width: 100%;
    box-sizing: border-box;
    border-radius: .16rem;
    overflow: hidden;
    /*box-shadow: 0rem 0rem .32rem 0.08rem #eee;*/
    box-sizing: border-box;
    padding-top: .24rem;
    padding-bottom: .24rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    /*grid-template-rows: repeat(3,1fr);*/
    grid-gap: .24rem;
  }
  .monitor > div {
    display: flex;
  }
  .biaoti{
    font-size: 0.28rem;
    color: black;
    margin-bottom: 12px;
    width: 65px;
  }
  .pargross_bar{
    flex: 1;
    height: 0.35rem;
    background: #c9e7fb;
    border-radius: 0.16rem;
    overflow: hidden;
  }
  .bar1{
    height: 100%;
    background: #58dacc;
    border-radius: 0.16rem;
    color: white;
    display: flex;
    align-items: center;
    font-size: 0.24rem;
  }
  .bar2{
    background: #1fd5f3;
  }
  .bar3{
    background: #4abbf0;
  }
  .bar4{
    background: #67a1ef;
  }
  .bar5{
    background: #a89fff;
  }
  .bar1 span{
    padding-left: 0.2rem;
  }

  /*改版之后检测数据的样式*/


</style>
